<template>
  <el-dialog class="scene_seckill" :class="{'scene_seckill_small': !(info&&info.right_list && info.right_list.length > 1)}"
    :visible="dialogVisible" :width="info&&info.right_list && info.right_list.length > 1?'655px':'561px'" custom-class="coupon-dialog" :show-close="false" :modal="!isPage" top="200px"  @closed="closed" :fullscreen="isPage" :close-on-click-modal="false">
    <div class="mydialog-box" :style="contentStyle" v-if="info">
      <div slot="title" class="flex-header">
          <i class="el-icon-close" @click="closeDialog('cancel')"></i>
      </div>
      <div class="scene_seckill_content">
        <div class="content_left">
          <div class="content-title">{{info.title}}</div>

          <p class="seckill__real_price">
            <span class="fs18 fb">仅需</span>
            <em class="fs20 fb">￥</em>
            <em class="fs40 fb">{{ finalPrice | moneyToyuan }}</em>
            /{{ memberTimeOptions.get(product.bus_ext.duration) }}
          </p>

          <div class="seckill__real_save">
            <div class="origin_price">原价<span>￥{{ product.origin_price | moneyToyuan}}</span></div>
            <span class="save_price fb">立减{{ savePrice | moneyToyuan }}元</span>
          </div>

          <div class="coupon-vip" v-if="info.right_list && info.right_list.length > 1">
            <div class="coupon-vip-title">{{info.right_slogan}}</div>
            <ul>
              <template v-for="(item, index) in info.right_list">
                <li v-if="index<3" class="coupon-vip-item" :key="index">
                  <img :src="item.right_icon" class="coupon-vip-icon">
                  <span class="coupon-vip-text">{{ item.right_name }}</span>
                </li>
              </template>
              <li class="coupon-vip-item">
                <img src="@/assets/icon-more.svg" class="coupon-vip-icon">
                <span class="coupon-vip-text">更多...</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="content_center"></div>
        <div class="content_right">
          <div class="pay_box">
            <div class="pay_box_title">扫码支付</div>
            <PaymentCode
              :width="160"
              :height="160"
              :padding="0"
              :openPos="windowName"
              :isAgree.sync="isAgree"
              :pkgId="product.pkgId"
              :product="product"
              :isExtraProducts="product.isExtraProducts"
              :productPrice="finalPrice"
              @paySuccess="onPaySuccess"
              :otherParamsStr="otherParamsStr"/>
          </div>
          <div v-if="info.countdown" class="seckill__countdown">
            <span>活动仅剩：</span>
            <p class="seckill_coutdown_span" >
              <!-- <span>{{ timeSplit.day }}</span>
              <em>:</em> -->
              <span>{{ timeSplit.hour }}</span>
              <em>:</em>
              <span>{{ timeSplit.minute }}</span>
              <em>:</em>
              <span>{{ timeSplit.second }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { parseTime } from '@/utils'
import { getMemberValidTime } from '@/constants/index'
import PaymentCode from '@/components/payment-code/src/main'
export default {
  name: '',
  components: {
    PaymentCode
  },
  props: {
    info: {
      default: () => ({}),
      type: Object
    },
    windowName: String,
    isPage: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.startCountDown(60 * 60 * this.info.countdown)
        if (this.info.background_image) {
          const imgEl = new Image()
          imgEl.src = this.info.background_image
          imgEl.onload = () => {
            this.contentStyle = {
              backgroundImage: `url(${this.info.background_image})`
            }
          }
        }
      } else {
        clearTimeout(this.startCountDownTimer)
      }
    }
  },
  data: () => ({
    // 会员等级选项
    memberTimeOptions: undefined,
    isAgree: true,
    dialogVisible: false,
    countdown: 0,
    contentStyle: null
  }),
  computed: {
    product () {
      const pro = this.info?.product || { bus_ext: {} }
      if (pro.related_pkg_detail?.length) {
        pro.pkgId = pro.related_pkg_detail[0].pkg_id
        pro.isExtraProducts = false
      } else {
        pro.pkgId = '10000'
        pro.isExtraProducts = true
      }
      return pro
    },
    otherParamsStr () {
      const params = {
      }
      if (this.info.detail?.id) {
        params['actids'] = this.info.detail?.id + ''
      }
      return JSON.stringify(params)
    },
    finalPrice () {
      let activity = {}
      try {
        activity = JSON.parse(this.info.detail?.setting)
      } catch (error) {
        activity = {}
      }
      return activity.price || this.product.price
    },
    savePrice () {
      return this.product.origin_price - this.finalPrice
    },
    timeSplit () {
      const time = this.countdown
      return {
        day: parseInt(time / 86400),
        hour: parseInt(time % 86400 / 3600).toString().padStart(2, '0'),
        minute: parseInt(time % 86400 % 3600 / 60).toString().padStart(2, '0'),
        second: parseInt(time % 86400 % 3600 % 60).toString().padStart(2, '0')
      }
    }
  },
  filters: {
    moneyToyuan (val = 0) {
      return parseFloat((val / 100).toFixed(2))
    }
  },
  methods: {
    parseTime,
    closeDialog (type) {
      if (this.isPage) {
        this.$xz('xz_switch_dialog', this.windowName, false)
      } else {
        this.dialogVisible = false
        this.closeType = type
      }
    },
    closed () {
      if (this.closeType === 'cancel' || this.closeType === '') {
        this.cancel && this.cancel()
      } else {
        this.confirm && this.confirm()
      }
    },
    startCountDown (time) {
      if (this.startCountDownTimer) clearTimeout(this.startCountDownTimer)
      time = time - 1
      if (time <= 0) {
        this.closeDialog('cancel')
        return
      }
      this.countdown = time
      this.startCountDownTimer = setTimeout(() => this.startCountDown(time), 1000)
    },
    onPaySuccess () {
      this.$xz('xz_substat_action', parseInt(this.info.sucess_buy_id))
      this.closeDialog('success')
    }
  },
  created () {
    this.dialogVisible = this.isPage
    this.memberTimeOptions = getMemberValidTime()
  }
}
</script>

<style lang="scss" scoped>
.scene_seckill{
  /deep/ .el-dialog{
    border:none;
  }
  /deep/ .el-dialog__body{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid #000000;
    padding: 0;
    color: #333333;
  }
  /deep/.el-dialog__header{
    padding: 0;
    border-radius: 0;
  }
  .flex-header{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 40px;
    .el-icon-close{
      color:#333;
      font-size:20px;
      margin: 10px;
      cursor: pointer;
      user-select: none;
    }
  }
  /deep/ .is-fullscreen {
    background: transparent;
    box-shadow: unset;
    border-radius: 0;
    .el-dialog__body {
      box-shadow: unset;
      border: 0;
    }
    .mydialog-box{
      height: 100%;
    }
  }
}
.mydialog-box {
  background: linear-gradient( 180deg, #FFEAEA 0%, #FFFFFF 100%);
  background-repeat: no-repeat;
  background-size: cover;
}
.scene_seckill_content {
  width: 100%;
  display: flex;
  padding-bottom: 32px;
}
.content_left {
  width: 364px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;

  .content-title {
    width: 260px;
    height: 42px;
    line-height: 42px;
    background: linear-gradient( 132deg, #ffe7e2 0%, #ffdfe7 100%);
    border-radius: 10px;
    border: 1px solid;
    font-weight: bold;
    font-size: 20px;
    color: #F15855;
    position: relative;
    margin: 0 auto;
    &::before {
      content: ' ';
      width: 262px;
      height: 44px;
      background: linear-gradient( 132deg, #FFA15E 0%, #FF419C 100%);
      position: absolute;
      border-radius: 10px;
      z-index: -1;
      top: -1px;
      left: -1px;
    }
  }

  .seckill__real_price {
    color: #333333;
    font-size: 14px;
    height: 53px;
    .fs20 {
      font-size: 20px;
      margin-left: 4px;
    }
    .fs40 {
      font-size: 40px;
    }
    em {
      color: #F15855;
    }
  }

  .seckill__real_save {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    .origin_price {
      opacity: 0.5;
      margin-right: 8px;
      span {
        text-decoration-line: line-through;
      }
    }
    .save_price {
      // width: 92px;
      height: 30px;
      line-height: 30px;
      padding: 0 16px;
      background: linear-gradient( 132deg, #FFA15E 0%, #FF419C 100%);
      border-radius: 6px;
      color: #FFFFFF;
    }
  }
  .coupon-vip{
    margin-top: 40px;
    .coupon-vip-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #7B4801;
      font-size: 14px;
      width: 320px;
      margin: 0 auto 10px;
      &::before {
        content: ' ';
        width: 90px;
        height: 1px;
        background: linear-gradient(90deg, rgba(123,72,1,0) 0%, #7B4801 100%);
      }
      &::after {
        content: ' ';
        width: 90px;
        height: 1px;
        background: linear-gradient( 90deg, #7B4801 0%, rgba(123,72,1,0) 100%);
      }
    }
    ul {
      display: flex;
      width: 284px;
      justify-content: space-between;
      .coupon-vip-icon {
        width: 36px;
        height: 36px;
        margin: 7px;
      }
      .coupon-vip-text {
        color: #A87701;
        font-size: 12px;
        width: 100%;
        margin-top: 5px;
      }
      .coupon-vip-item {
        width: 56px;
        display: inline-block;
        position: relative;
        z-index: 1;
        &::before {
          content: ' ';
          width: 50px;
          height: 50px;
          background: linear-gradient( 180deg, #FFF2D2 0%, #F8DD99 100%);
          border-radius: 50%;
          position: absolute;
          z-index: -1;
          top: 0;
          margin: 0 auto;
        }
      }
    }
  }
}
.content_center {
  width: 1px;
  height: 308px;
  background: rgba(241,88,85,0.2);
  border-radius: 0px 0px 0px 0px;
}
.content_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  &::before {
    content: ' ';
    width: 228px;
    height: 289px;
    background: linear-gradient( 132deg, #FFA15E 0%, #FF419C 100%);
    position: absolute;
    border-radius: 24px;
    z-index: -1;
    top: 0;
    left: 50%;
    margin-left: -114px;
  }
  .pay_box {
    width: 220px;
    height: 281px;
    background: #FFFFFF;
    border-radius: 20px;
    position: relative;
    text-align: center;
    margin: 4px auto;
    .pay_box_title {
      font-size: 16px;
      height: 21px;
      font-weight: bold;
      margin: 20px auto 16px;
    }
    /deep/ .qr-code {
      margin: 0 auto;
    }
    /deep/ .pay-type {
      margin: 16px auto 0;
    }
    /deep/.refund{
      color: rgba($color: #333, $alpha: 0.7);
    }
  }
  .seckill__countdown {
    margin-top: 16px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
  }
  .seckill_coutdown_span {
    display: flex;
    font-style: 14px;
    gap: 4px;
    span {
      width: 20px;
      height: 20px;
      background: rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-size: 12px;
    }
  }
}

.scene_seckill_small {
  .content_left {
    width: 280px;
  }
  .content-title {
    width: 220px
  }
}
</style>
